<template>
	<div class="cartoon">
		<div class="cartoon-list">
			<a class="clist hovering" :href="item.url" v-for="item in cartoonList" :id="item.id">
				<img :src="item.img" />
				<div>{{item.text}}</div>
			</a>
		</div>
		<div class="cartoon-hot">
			<div class="header">人气漫画</div>
			<a class="list-item hovering" v-for="(item, index) in cartoonHot" :key="item.comic_id" @mouseover="show=index" @mouseleave="show=len">
				<span class="index">{{index+1}}</span>
				<span class="text ellipsis">{{item.title}}</span>
				<img class="list-img" v-show="index==show" :src="item.vertical_cover" />
			</a>
		</div>
		<span class="triangle"><Icon type="arrowUp"/></span>
	</div>
</template>

<script>
export default{
	data(){
		return{
			// 控制显示的图片index
			show: undefined
		}
	},
	computed:{
		cartoonList(){
			return this.$store.state.pops.cartoonList;
		},
		cartoonHot(){
			let cartoonHot = this.$store.state.pops.cartoonHot
			return cartoonHot.slice(0, 6);
		},
		len(){
			return this.cartoonHot.length;
		}
	},
	methods:{
		getData(){
			let list = {
				where: 'pops/getCartoonList', 
				url: '/mock/cartoon',
				method: 'post'
			}
			let hot = {
				where: 'pops/getCartoonHot', 
				url: '/twirp/comic.v1.Comic/HomeHot',
				method: 'post'
			}
			this.$store.dispatch('global/request', list);
			this.$store.dispatch('global/request', hot);
		}
	},
	mounted() {
		this.getData();
	}
}
</script>

<style scoped lang="less">
.cartoon{
	display: flex;
	width: 520px;
	height: 260px;
	background-color: #fff;
	box-shadow: 1px 1px 3px rgba(0,0,0,.4);
	border-radius: 0 0 4px 4px;
	.cartoon-list{
		display: inline-block;
		width: 332px;
		padding: 10px;
		box-sizing: border-box;
		.clist{
			display: inline-block;
			padding: 10px;
			box-sizing: border-box;
			img{
				width: 136px;
				height: 77px;
				border-radius: 2px;
			}
			div{
				max-width: 136px;
				margin-top: 6px;
				height: 16.8px;
				line-height: 16.8px;
				font-size: 13px;
				color: rgba(0,0,0,.87);
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
	.cartoon-hot{
		display: inline-block;
		position: relative;
		margin: 20px 0;
		width: 187px;
		box-sizing: border-box;
		border-left: 1px solid rgba(0,0,0,.1);
		color: #1c1d1f;
		.header{
			margin-bottom: 5px;
			padding: 0 20px;
			font-size: 16px;
		}
		.list-item{
			display: block;
			padding: 0 20px;
			line-height: 2.6;
			.index{
				margin-right: 10px;
				color: #cf9870;
				font-size: 13px;
			}
			.text{
				font-size: 13px;
			}
			.list-img{
				position: absolute;
				right: -88%;
				top: 0;
				width: 170px;
				height: 100%;
				border-radius: 5px;
			}
		}
	}
	.triangle{
		left: 60px;
	}
}
</style>
